<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    background-color="transparent"
    text-color="#FFFFFF"
    active-text-color="#FFFFFF"
    @select="handleSelect"
    menu-trigger="click"
  >
    <!-- 固定的一级菜单项 -->
    <el-menu-item index="1">
      <router-link to="/">公司门户</router-link>
    </el-menu-item>
    <el-menu-item index="2">
      <router-link to="/personal">个人门户</router-link>
    </el-menu-item>
    <el-menu-item index="55">
      <router-link to="/sale">销售门户</router-link>
    </el-menu-item>
    <el-menu-item index="56">
      <router-link to="/assistant">助理门户</router-link>
    </el-menu-item>
    <el-submenu
      v-for="item in dynamicMenuItems"
      :key="item.id"
      :index="item.id.toString()"
    >
      <template slot="title">
        {{ item.name }}
      </template>
      <el-menu-item
        v-for="directory in item.directory"
        :key="directory.id"
        :index="directory.id.toString()"
      >
    

        <!-- 如果有三级菜单 -->
        <el-submenu
          v-if="directory.function && directory.function.length"
          :key="directory.id + '-sub'"
          :index="directory.id.toString() + '-sub'"
        >
          <template slot="title">
            {{ directory.name }}
          </template>
          <el-menu-item
            v-for="func in directory.function"
            :key="func.id"
            :index="func.id.toString()"
          >
            {{ func.name }}
          </el-menu-item>
        </el-submenu>
      </el-menu-item>
    </el-submenu>
  </el-menu>
</template>
  
  <script>
import { getNavbar } from "@/api/index";
export default {
  name: "CustomMenu", // 组件名称
  props: {
    initialActiveIndex: {
      type: String,
      default: "1", // 默认选中第一个菜单项
    },
    menuItems: {
      type: Array,
      default: () => [], // 接受动态菜单项
    },
  },
  data() {
    return {
      activeIndex: this.initialActiveIndex, // 使用 props 传入的初始值

      dynamicMenuItems: [
        {
          id: 3,
          name: "动态菜单1",
          route: "/dynamic1",
          directory: [
            {
              id: 31,
              name: "子菜单1-1",
              route: "/dynamic1/sub1",
              function: [
                { id: 311, name: "功能1-1-1", route: "/dynamic1/sub1/fun1" },
                { id: 312, name: "功能1-1-2", route: "/dynamic1/sub1/fun2" },
              ],
            },
            {
              id: 32,
              name: "子菜单1-2",
              route: "/dynamic1/sub2",
              function: [],
            },
          ],
        },
        {
          id: 4,
          name: "动态菜单2",
          route: "/dynamic2",
          directory: [],
        },
      ],
    };
  },
  mounted() {
    this.getlist();
  },
  methods: {
    //获取菜单
    getlist() {
      var param = {
        sid: window.sid,
        cmd: "com.bono.portal.allnav",
        searchWord: "",
      };
      getNavbar(param).then((res) => {
        console.log("-.-", res);
        this.dynamicMenuItems = res.data.nav;
      });
    },
    handleSelect(index) {
      this.activeIndex = index; // 更新选中项
      console.log(index, "index");
    },
    navigateTo(path) {
      this.$router.push(path); // 使用 Vue Router 进行跳转
    },
  },
};
</script>
  
  <style lang="scss" scoped>
 .el-menu--horizontal{
    background: #5277b4 !important;
  }

  ::v-deep.el-submenu__title i{
    display: none !important;
  }
.el-menu-item:focus,
.el-menu-item:hover {
  background-color: transparent !important;
}
.el-submenu__title i {
}
::v-deep .el-submenu__title {
  font-family: "PingFang SC";
  font-weight: 500;
  font-size: 14px;
  color: #ffffff;

  padding: 0 10px !important;
}

.el-menu-item {
  font-family: "PingFang SC";
  font-weight: 500;
  font-size: 14px;
  color: #ffffff;
  height: 100%;
  padding: 0 5px !important;
}
.el-menu--horizontal > .el-menu-item {
  height: 100%;
}
.custom-menu-item {
  font-family: "PingFang SC";
  font-weight: 500;
  font-size: 14px;
  color: #ffffff;
}
.active-item {
}
.el-menu--horizontal > .el-menu-item.is-active {
  background-image: url("../../assets/img/headerseled.png"); /* 背景图路径 */
  background-size: 100% 100%; /* 调整背景图大小 */

  border-bottom: none !important;
  font-family: PingFang SC;
  font-weight: bold;
  font-size: 16px;
  color: #ffffff;
}

</style>
  